<template>
	<view class="tab">
		<view @click="shenpiTab" :class="className0">审批中</view>
		<view @click="passTab"  :class="className1">已通过</view>
		<view @click="refuseTab" :class="className2">已拒绝</view>
		
	</view>
	<view class="kongbai">
		
	</view>
	<view v-if="tabWitch==0">
		<view class="data_item" v-for="(item,i) in list" :key="i">
				<view class="card-left">
					<view><text class="gray">物料名称：</text>{{item?.spare_manage__name}}</view>
					<view><text class="gray">物料编码：</text>{{item?.spare_manage__code}}</view>
					<view><text class="gray">规格：</text>{{item?.spare_manage__specs }} {{' '}}<text class="gray">型号：</text>{{item?.spare_manage__model}}</view>
					<view><text class="gray">材质：</text>{{item?.spare_manage__material}}</view>
					<view><text class="gray">供货日期：</text>{{item?.spare_device__spare_batch__date}}</view>
					<view><text class="gray">供应商：</text>{{item?.spare_device__spare_batch__company__name}}</view>
					<view><text class="gray">库位：</text>{{item?.store_place__flag}} {{' '}}<text class="gray">流水号：</text>{{item?.record_type_id}}</view>
					<view><text class="gray">仓库：</text>{{item?.store_place__storage__name}}</view>
					<view>
						<text class="gray">业务类型：</text>
						<uni-tag :inverted="true"  :text="item?.record_type__name" :type="item?.record_type__name=='报废'?'error':'success'" />
					</view>
					<view><text class="gray">业务发生数量：</text><text style="color: red;"> {{item?.record_type__change}}</text></view>
					<view><text class="gray">申请人：</text>{{item?.apply_user}}</view>
					<view><text class="gray">申请时间：</text>{{item?.apply_time}}</view>
																				
				</view>
				<view class="right"> 
					<button size="mini" type="warn" style="font-size: 14px;" @click="refuse(item,i)">拒绝</button>
					<button size="mini" type="primary" style="font-size: 14px;" @click="pass(item,i)">通过</button>
				</view>
				
		</view>
	</view>
	<view v-if="tabWitch==1||tabWitch==2">
		<view class="data_item" v-for="(item ,i) in list" :key="i">
			<view class="card-left">
					<view><text class="gray">物料名称：</text>{{item?.spare_manage__name}}</view>
					<view><text class="gray">物料编码：</text>{{item?.spare_manage__code}}</view>
					<view><text class="gray">规格：</text>{{item?.spare_manage__specs }} {{' '}}<text class="gray">型号：</text>{{item?.spare_manage__model}}</view>
					<view><text class="gray">材质：</text>{{item?.spare_manage__material}}</view>
					<view><text class="gray">供货日期：</text>{{item?.spare_device__spare_batch__date}}</view>
					<view><text class="gray">供应商：</text>{{item?.spare_device__spare_batch__company__name}}</view>
					<view><text class="gray">库位：</text>{{item?.store_place__flag}} {{' '}}<text class="gray">流水号：</text>{{item?.record_type_id}}</view>
					<view><text class="gray">仓库：</text>{{item?.store_place__storage__name}}</view>
					<view>
						<text class="gray">业务类型：</text>
						<uni-tag :inverted="true"  :text="item?.record_type__name" :type="item?.record_type__name=='报废'?'error':'success'" />
					</view>
					<view><text class="gray">业务发生数量：</text><text style="color: red;"> {{item?.record_type__change}}</text></view>
					<view>
						<text class="gray">审批状态：</text>
						<uni-tag :inverted="true"  :text="tabWitch==1 ?'通过':'拒绝'" :type="tabWitch==1 ?'success':'error'" />
					</view>
					<view><text class="gray">申请人：</text>{{item?.apply_user}}</view>
					<view><text class="gray">申请时间：</text>{{item?.apply_time}}</view>
					<view><text class="gray">备注：</text>{{item?.bz}}</view>
					<view><text class="gray">审批人：</text>{{item?.check_user}}</view>
					<view><text class="gray">审批时间：</text>{{item?.check_time}}</view>
																			
			</view>
		</view>
	</view>
	<view class="kongbai">
		
	</view>
	<uni-popup ref="refuse_popup" type="dialog" >
		<view class="dialog_center">
			<view class="title">拒绝理由</view>
			<textarea placeholder="请输入拒绝理由(必填)" v-model="bz"></textarea>
			<view class="btnPopupBox">
				<button size="default" type="default" @click="cancel">取消</button>

				<button size="default" type="primary" @click="refuseConfirm">确定</button>
			</view>
		</view>
		
	</uni-popup>
	<uni-popup ref="pass_popup" type="dialog">
		<uni-popup-dialog type="success" cancelText="取消" confirmText="确定" title="通知" content="是否确定通过" @confirm="passConfirm"
			></uni-popup-dialog>
	</uni-popup>
	<view class="loadMoreBox" v-show="page_index<page_count">
		<button size="default" type="primary"  @click="loadMore">加载更多</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tabWitch:0,
			status:'',
			list:'',
			refuseId:'',
			passId:'',
			bz:'',
			page_index:1,
			page_count:0,
			i:'',
		}
	},
	onLoad() {
		this.status='none'
		let that=this;
		that.$root.http('http://113.15.231.21:180/storage_manage2/ding_app/query_spare_record_apply_list',
			{
			  org_id: 34,                 // 组织ID 写死 34
			  status: 'none',             // 审批状态： 未审批 
			  page_index: 1,             // 第一页
			  pageSize: 30,    
			}, 
			{
			  	sessionid:that.$root.sessionID
			})
			.then((res) => {
				let fun=function(){
					if(res.data.result&&res.data.result.list&&res.data.result.list.length>0){
						console.log("存在");
						that.list=res.data.result.list
						that.page_count=res.data.result.page_count;										
					}
					else{
						console.log("不存在");
						that.$root.message('fail','扫的码id不存在')
					}
				}
				that.$root.judge(res,fun);
			})
	},
	computed:{
		className0(){
			return this.tabWitch==0? 'choosed':'notChoosed'
		},
		className1(){
			return this.tabWitch==1? 'choosed':'notChoosed'
		},
		className2(){
			return this.tabWitch==2? 'choosed':'notChoosed'
		},
	},
	methods: {
		shenpiTab(){
			this.tabWitch=0
			// this.$root.message('fail',this.status)
			this.status='none'
			let that=this;
			that.$root.http('http://113.15.231.21:180/storage_manage2/ding_app/query_spare_record_apply_list',
				{
				  org_id: 34,                 // 组织ID 写死 34
				  status: 'none',             // 审批状态： 未审批 
				  page_index: 1,             // 第一页
				  pageSize: 30,    
				}, 
				{
				  	sessionid:that.$root.sessionID
				})
				.then((res) => {
					let fun=function(){
						if(res.data.result&&res.data.result.list&&res.data.result.list.length>0){
							console.log("存在");
							that.list=res.data.result.list
							that.page_count=res.data.result.page_count;								
						}
						else{
							console.log("不存在");
							that.$root.message('fail','扫的码id不存在')
						}
					}
					that.$root.judge(res,fun);
				})
		},
		passTab(){
			this.tabWitch=1
			// this.$root.message('fail',this.status)
			this.status='ok'
			let that=this;
			that.$root.http('http://113.15.231.21:180/storage_manage2/ding_app/query_spare_record_apply_list',
				{
				  org_id: 34,                 // 组织ID 写死 34
				  status: 'ok',             // 审批状态： 未审批 
				  page_index: 1,             // 第一页
				  pageSize: 30,    
				}, 
				{
				  	sessionid:that.$root.sessionID
				})
				.then((res) => {
					let fun=function(){
						if(res.data.result&&res.data.result.list&&res.data.result.list.length>0){
							console.log("存在");
							that.list=res.data.result.list
							that.page_count=res.data.result.page_count;								
						}
						else{
							console.log("不存在");
							that.$root.message('fail','扫的码id不存在')
						}
					}
					that.$root.judge(res,fun);
				})
		},
		refuseTab(){
			this.tabWitch=2
			// this.$root.message('fail',this.status)
			this.status='refuse'
			let that=this;
			that.$root.http('http://113.15.231.21:180/storage_manage2/ding_app/query_spare_record_apply_list',
				{
				  org_id: 34,                 // 组织ID 写死 34
				  status: 'refuse',             // 审批状态： 未审批 
				  page_index: 1,             // 第一页
				  pageSize: 30,    
				}, 
				{
				  	sessionid:that.$root.sessionID
				})
				.then((res) => {
					let fun=function(){
						if(res.data.result&&res.data.result.list&&res.data.result.list.length>0){
							console.log("存在");
							that.list=res.data.result.list
							that.page_count=res.data.result.page_count;								
						}
						else{
							console.log("不存在");
							that.$root.message('fail','扫的码id不存在')
						}
					}
					that.$root.judge(res,fun);
				})
		},
		refuse(item,i){
			this.refuseId=item?.id;
			this.i=i;
			this.bz='';
			if(item.status=='none'){
				this.$refs.refuse_popup.open('center')
			}
			else{
				this.$root.message('fail','该物料不是未审批')
			}
			
		},
		cancel(){
			this.$refs.refuse_popup.close()
		},
		refuseConfirm(){
			if(this.bz){
				let that=this;
				that.$root.http('http://113.15.231.21:180/storage_manage2/ding_app/refuse_apply',
					{
						org_id: 34,                 // 组织ID 写死 34
						id: that.refuseId,                     // 审批记录的id
						reason: that.bz       // 拒绝理由 
					}, 
					{
					  	sessionid:that.$root.sessionID
					})
					.then((res) => {
						let fun=function(){
							that.list.splice(that.i,1)
							that.$refs.refuse_popup.close()
						}
						that.$root.judge(res,fun);
					})
			}
			else{
				this.$root.message('fail','请先输入备注')
			}
		},
		pass(item,i){
			this.passId=item?.id;
			this.i=i;
			if(item.status=='none'){
				this.$refs.pass_popup.open('center')
			}
			else{
				this.$root.message('fail','该物料不是未审批')
			}
			
		},
		passConfirm(){
			let that=this;
			that.$root.http('http://113.15.231.21:180/storage_manage2/ding_app/approve_apply',
				{
					org_id: 34,                 // 组织ID 写死 34
					id: that.passId,                     // 审批记录的id
				}, 
				{
				  	sessionid:that.$root.sessionID
				})
				.then((res) => {
					let fun=function(){
						that.list.splice(that.i,1)
					}
					that.$root.judge(res,fun);
				})
		},
		loadMore(){
			let that=this;
			that.page_index++;
			console.log(that.page_index)
			that.$root.http('http://113.15.231.21:180/storage_manage2/ding_app/query_spare_record_apply_list',
				{
				  org_id: 34,                 // 组织ID 写死 34
				  status: that.status,             // 审批状态： 未审批 
				  // page_index: 2,             // 不生效
				  current: that.page_index,
				  pageSize: 30,    
				}, 
				{
				  	sessionid:that.$root.sessionID
				})
				.then((res) => {
					let fun=function(){
						that.list.push(...res.data.result.list)
						console.log('拼接数组')
						console.log(that.list)
					}
					that.$root.judge(res,fun);
				})
		}
		
	},
}
</script>

<style scoped>
.tab{
	width: 100%;
	height: 40px;
	background-color: #F6F6F6;
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.tab view{
	font-size: 16px;
	font-weight: 600;
	line-height: 40px;
	width: 33%;
	height: 100%;
	text-align: center;
}
.kongbai{
	height: 10px;
}
.notChoosed{
	color: darkgray;
}
.choosed{
	color: royalblue;
	border-bottom: 2px solid royalblue;
}
.data_item{
	margin-left: 10px;
	margin-top: 20px;
	width: 90%;
	background-color: white;
	border-radius: 5px;
	font-size: 14px;
	padding-left: 10px;
	/* padding-bottom: 5px; */
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	
}
.card-left view{
	margin-top: 5px;
	padding-bottom: 5px;
}
.gray{
	color: #93A1A1;
}
.right{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}
.dialog_center{
	width: 350px;
	/* height: 200px; */
	background-color: white;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}
.dialog_center .title{
	font-size: 16px;
	padding: 10px;
}
.dialog_center textarea{
	margin-top: 10px;
	width: 90%;
	height: 70%;
	border: 1px solid #93A1A1;
	font-size: 14px;
}
.btnPopupBox{
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-top: 20px;
}
.btnPopupBox button{
	width: 50%;
}
.loadMoreBox{
	width: 100%;
	margin-top: 12px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.loadMoreBox button{
	width: 30%;
}
</style>